<div class="container-fluid" id="inner-content">
    <br>
    <div id="configuration-alerts"></div>

    <div class="col-md-3 tab-container" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav tabs" role="tablist">
                <li role="presentation"><a class="tablink" href="#problem" aria-controls="problem" role="tab" data-toggle="tab" id="problem-tab">Problem</a></li>
                <li role="presentation"><a class="tablink" href="#bounds" aria-controls="bounds" role="tab" data-toggle="tab" id="bounds-tab">Bounds</a></li>
                <li role="presentation"><a class="tablink" href="#planner" aria-controls="planner" role="tab" data-toggle="tab" id="planner-tab">Planner</a></li>
                <li role="presentation"><a class="tablink" href="#solve" aria-controls="solve" role="tab" data-toggle="tab" id="solve-tab">Solve</a></li>
                <li role="presentation"><a class="tablink" href="#settings" aria-controls="settings" role="tab" data-toggle="tab" id="settings-tab"><div id="settingsIcon"><span class="glyphicon glyphicon-cog"></span></div></a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <!-- Begin Problem Tab -->
                <div role="tabpanel" class="tab-pane fade" id="problem">
                    <!-- Problem Selection -->
                    <div class="">
                        <!-- Problem Selection -->
                        <div class="form-group">
                            <label>Problem</label>
                            <select name="problems" id="problems" class="problem-cfg">
                                <option value="custom" selected="selected">Custom</option>
                            </select>
                        </div> <!-- Close Problem -->

                        <div class="form-group">
                            <label>Robot Type</label>
                            <select name="robot.type" id="robot_type" class="problem-cfg">
                            </select>
                        </div> <!-- Close Problem -->
                        <!-- Custom problem upload -->
                        <div class="collapse in" id="customProblem">
                            <form enctype="multipart/form-data">
                                <div class="form-group">
                                    <label>Environment</label>
                                    <input type="file" name="env" id="env_path" class="form-control input-sm">
                                </div>
                                <div class="form-group">
                                    <label>Robot</label>
                                    <input type="file" name="robot" id="robot_path" class="form-control input-sm">
                                </div>
                            </form>
                            <center><button class="btn btn-default" onclick="uploadModels()" id="uploadModelsButton">Upload Models</a></center>
                            <br>
                            <div class="form-group" id="customProblem">
                                <label>Configuration File</label>
                                <input type="file" name="cfg-file" id="cfg-file" class="form-control input-sm">
                            </div>
                        </div> <!-- Close collapsible options -->
                    </div>

                    <!-- Start Pose -->
                    <div>
                        <table class="table">
                            <caption>Start Pose</caption>
                            <thead class="3D">
                                <tr>
                                <th>Axis</th>
                                <th>Position</th>
                                <th>Rotation</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>X</th>
                                    <td><input type="number" step="any" name="start.x" class="pose form-control problem-cfg input-sm"></td>
                                    <td class="3D"><input type="number" step="any" name="start.deg.x" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr>
                                    <th>Y</th>
                                    <td><input type="number" step="any" name="start.y" class="pose form-control problem-cfg input-sm"></td>
                                    <td class="3D"><input type="number" step="any" name="start.deg.y" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr class="3D">
                                    <th>Z</th>
                                    <td><input type="number" step="any" name="start.z" class="3D pose form-control problem-cfg input-sm"></td>
                                    <td><input type="number" step="any" name="start.deg.z" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr class="2D" hidden="true">
                                    <th>Rotation</th>
                                    <td><input type="number" step="any" name="start.yaw" class="2D pose form-control problem-cfg input-sm" placeholder="degrees"></input>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- Goal Pose -->
                    <div>
                        <table class="table">
                            <caption>Goal Pose</caption>
                            <thead class="3D">
                                <tr>
                                <th>Axis</th>
                                <th>Position</th>
                                <th>Rotation</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>X</th>
                                    <td><input type="number" step="any" name="goal.x" class="pose form-control problem-cfg input-sm"></td>
                                    <td class="3D"><input type="number" step="any" name="goal.deg.x" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr>
                                    <th>Y</th>
                                    <td><input type="number" step="any" name="goal.y" class="pose form-control problem-cfg input-sm"></td>
                                    <td class="3D"><input type="number" step="any" name="goal.deg.y" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr class="3D">
                                    <th>Z</th>
                                    <td><input type="number" step="any" name="goal.z" class="3D pose form-control problem-cfg input-sm"></td>
                                    <td><input type="number" step="any" name="goal.deg.z" class="3D pose form-control problem-cfg input-sm" placeholder="degrees"></td>
                                </tr>
                                <tr class="2D" hidden="true">
                                    <th>Rotation</th>
                                    <td><input type="number" step="any" name="goal.yaw" class="2D pose form-control problem-cfg input-sm" placeholder="degrees"></input>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- End Problem Tab -->

                <!-- Begin Bounds Tab -->
                <div role="tabpanel" class="tab-pane fade" id="bounds">
                    <table class="table">
                        <caption>Bounding Box</caption>
                        <thead>
                            <tr>
                            <th>Axis</th>
                            <th>Lower</th>
                            <th>Upper</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>X</th>
                                <td><input type="number" step="any" name="volume.min.x" class="bounds form-control problem-cfg input-sm"></td>
                                <td><input type="number" step="any" name="volume.max.x" class="bounds form-control problem-cfg input-sm"></td>
                            </tr>
                            <tr>
                                <th>Y</th>
                                <td><input type="number" step="any" name="volume.min.y" class="bounds form-control problem-cfg input-sm"></td>
                                <td><input type="number" step="any" name="volume.max.y" class="bounds form-control problem-cfg input-sm"></td>
                            </tr>
                            <tr class="3D">
                                <th>Z</th>
                                <td><input type="number" step="any" name="volume.min.z" class="3D bounds form-control problem-cfg input-sm"></td>
                                <td><input type="number" step="any" name="volume.max.z" class="3D bounds form-control problem-cfg input-sm"></td>
                            </tr>
                            <tr>
                                <td colspan=2>Show Bounding Box</td>
                                <td><input type='checkbox' id='showBoundingBox' checked></input></td>
                            </tr>
                        </tbody>
                    </table>
                    <center>
                        <button class="button btn btn-default" onclick="visualization.calculateBounds()">Calculate Bounding Box</button>
                    </center>
                </div>
                <!-- End Bounds Tab -->

                <!-- Begin Planner Configuration Tab -->
                <div role="tabpanel" class="tab-pane fade" id="planner">
                    <div class="form-group">
                        <label>Planner</label>
                        <select name="planners" id="planners" class="problem-cfg">
                            <!-- These options are filled in by loadPlanners() in configuration.js -->
                        </select>
                    </div>
                    <div id="plannerPane">
                        Planner specific settings are displayed here when a
                        planner is selected.
                    </div>

                    <!-- Optimization -->
                    <div class="form-group">
                        <label>Optimization Objective</label>
                        <select name="objective" id="objective" class="problem-cfg">
                            <option value="length" selected>Length</option>
                            <option value="max_min_clearance">Maximize Min Clearance</option>
                            <option value="mechanical_work">Mechanical Work</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Cost Threshold</label>
                        <input type='number' name='objective.threshold' id='objective.threshold' value='10000' class="form-control problem-cfg input-sm"></input>
                    </div>

                    More information about planners and their parameters can be found <a target="none" href="http://ompl.kavrakilab.org/planners.html">here</a>.
                </div>
                <!-- End Planner Configuration Tab -->

                <!-- Begin Solve Tab -->
                <div role="tabpanel" class="tab-pane fade" id="solve">
                    <div class="">
                        <table class="table">
                            <caption>Solve Problem</caption>
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td><input type="text" name="name" class="form-control problem-cfg input-sm"></td>
                                </tr>
                                <tr>
                                    <td>Time Limit (sec)</td>
                                    <td><input type="number" name="solve_time" step="any" class="form-control problem-cfg input-sm" value="10"></td>
                                </tr>
                            </tbody>
                        </table>

                        <a class="collapsable-link" role="button" data-toggle="collapse" href="#advancedOptions">Advanced Options</a>
                        <div class="collapse" id="advancedOptions">
                            <table class="table" class="advanced-options-table">
                                <tbody>
                                    <tr>
                                        <td>Runs</td>
                                        <td><input type="number" name="runs" class="form-control problem-cfg input-sm" value="1"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <br><br>
                        <!-- <hr> -->
                        <button class="btn btn-primary" type="button" onclick="problem.solve()" id="solve-button">Solve</button>
                        <button class="btn btn-danger" type="button" onclick="solution.clear()">Clear</button>

                        <div class="hidden" id='pathButtons'>
                            <button class="btn btn-success" type='button' onclick='visualization.toggleAnimation()' id='animateToggleBtn'>Animate</button>
                            <button class="btn btn-success" type='button' onclick='visualization.toggleRobotPath()' id='toggleRobotPathBtn'>Show Path</button>
                            <br><br>
                            <table class="table">
                                <tr>
                                    <td>Animation Speed</td>
                                    <td><input type="range" min=700 max =999 id="animationSpeed"></input></td>
                                </tr>
                                <tr>
                                    <td>Show explored states</td>
                                    <td><input type="checkbox" id="showExplored" selected="false"></input></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="">
                        <div id="results"></div>
                    </div>
                    </center>
                </div>
                <!-- End Solve Tab -->

                <!-- Begin Settings Tab -->
                <div role="tabpanel" class="tab-pane fade" id="settings">
                    <table class="table">
                        <caption>Settings</caption>
                        <tbody>
                            <tr>
                                <td>Show Axis Helper</td>
                                <td><input type='checkbox' id='showAxisHelper'></input></td>
                            </tr>
                            <tr>
                                <td>Visualization Theme</td>
                                <td colspan="2">
                                    <select id="vizTheme">
                                        <option value="light">Light</option>
                                        <option value="dark">Dark</option>
                                    </select>

                                </td>
                            </tr>
                            <tr>
                                <td>Download Configuration File</td>
                                <td colspan="2"><a class="iconlink" onclick="problem.downloadConfig()" id="downloadConfigButton">&#11015;</a></td>
                            </tr>
                            <tr>
                                <td>Download Solution Path</td>
                                <td colspan="2"><a class="iconlink" onclick="solution.downloadSolutionPath()" id="downloadConfigButton">&#11015;</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- End Settings Tab -->
            </div>
            <!-- End Tab panes -->

        </form>
        <!-- Close form -->

    </div> <!-- End tab panel -->

    <div class="col-md-9">
        <div class="visualization" id="viewer">
            <span title="Visualization Controls" data-content="Left-click and drag to rotate. Right-click and drag to pan. Scroll to zoom. Toggle axis helper in the Settings tab. Toggle bounding box in the Bounds tab." data-toggle="popover" data-placement="right" class="floating-icon glyphicon glyphicon-question-sign"></span>
        </div>
    </div>

</div> <!-- Close fluid container -->
